<header>
    <script type="text/javascript" src="js/raphael-min.js"></script>
    <script type="text/javascript" src="js/dracula_graffle.js"></script>
    <script type="text/javascript" src="js/dracula_graph.js"></script>
    <script type="text/javascript">
<!--

var redraw;
var height = 300;
var width = 400;

/* only do all this when document has finished loading (needed for RaphaelJS) */
window.onload = function() {

    var g = new Graph();

    /* add a simple node */
    g.addNode("strawberry");
    g.addNode("cherry");

    /* add a node with a customized label */
    g.addNode("34", { label : "Tomato" });

    /* add a node with a customized shape 
       (the Raphael graph drawing implementation can draw this shape, please 
       consult the RaphaelJS reference for details http://raphaeljs.com/) */
    var renderer = function(r, n) {
            /* the Raphael set is obligatory, containing all you want to display */
            var set = r.set().push(
                /* custom objects go here */
                r.rect(n.point[0]-30, n.point[1]-13, 62, 86).attr({"fill": "#fa8", "stroke-width": 2, r : "9px"})).push(
                r.text(n.point[0], n.point[1] + 30, n.label).attr({"font-size":"20px"}));
            /* custom tooltip attached to the set */
            /*tooltip = Raphael.el.tooltip;*/
            tooltip = r.set()
                        .push(
                            r.rect(0, 0, 90, 30).attr({"fill": "#fec", "stroke-width": 1, r : "9px"})
                        ).push(
                            r.text(25, 25, "testing").attr({"fill": "#000000"})
                        );
            for(i in set.items) {
                    set.items[i].tooltip(tooltip);
                };
//            set.tooltip(r.set().push(r.rect(0, 0, 30, 30).attr({"fill": "#fec", "stroke-width": 1, r : "9px"})).hide());
            return set;
        };
    g.addNode("id35", {
        label : "meat\nand\ngreed" ,
        /* filling the shape with a color makes it easier to be dragged */
        /* arguments: r = Raphael object, n : node object */
        render : renderer
    });
//    g.addNode("Wheat", {
        /* filling the shape with a color makes it easier to be dragged */
        /* arguments: r = Raphael object, n : node object */
//        shapes : [ {
//                type: "rect",
//                x: 10,
//                y: 10,
//                width: 25,
//                height: 25,
//                stroke: "#f00"
//            }, {
//                type: "text",
//                x: 30,
//                y: 40,
//                text: "Dump"
//            }],
//        overlay : "<b>Hello <a href=\"http://wikipedia.org/\">World!</a></b>"
//    });

    st = {directed:true,label : "Label"};
    g.addEdge("kiwi", "penguin",st);

    /* connect nodes with edges */
    g.addEdge("strawberry", "cherry");
    g.addEdge("cherry", "apple");
    g.addEdge("34", "id35");
    g.addEdge("penguin", "id35");
    g.addEdge("kiwi", "id35");

    /* a directed connection, using an arrow */
    g.addEdge("34", "cherry", { directed : true } );
    
    /* customize the colors of that edge */
    g.addEdge("id35", "apple", { stroke : "#bfa" , fill : "#56f", label : "Meat-to-Apple" });
    
    /* add an unknown node implicitly by adding an edge */
    g.addEdge("strawberry", "apple");


    /* layout the graph using the Spring layout implementation */
    var layouter = new Graph.Layout.Spring(g);
    layouter.layout();
    
    /* draw the graph using the RaphaelJS draw implementation */
    var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
    renderer.draw();
    
    redraw = function() {
        layouter.layout();
        renderer.draw();
    };
};

-->
    </script>
</header>
<body>
<div id="canvas"></div>
<button id="redraw" onclick="redraw();">redraw</button>
</body>
